import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";
import { HttpService } from "src/app/shared/service/http.service";
import { NavController, ModalController } from "@ionic/angular";
import { AppGlobalService } from "src/app/shared/service/app-global.service";
import { MapBaiduService } from "src/app/shared/service/map.baiduapi";
declare var BMap;
@Component({
  selector: "app-data-map-entry",
  templateUrl: "./data-map-entry.component.html",
  styleUrls: ["./data-map-entry.component.scss"],
})
export class DataMapEntryComponent implements OnInit {
  @ViewChild("entryMap") mapElement: ElementRef;
  @ViewChild("entryMapMask") mapMaskElement: ElementRef;
  constructor(
    private http: HttpService,
    public navController: NavController,
    public modalController: ModalController,
    private appGlobalService: AppGlobalService,
    private mapBaiduService: MapBaiduService
  ) {
    this.mapId = "mapId" + new Date().getTime();
  }
  private mapId: any;
  @Input() tagData: any;
  locationTile;
  storageObj;
  componentTitle = "数据地图";
  isShowChart = false;
  showEntry = false;
  gps = new BMap.Icon(
    "assets/img/map/map_icon_location@3x.png",
    new BMap.Size(26, 26)
  );
  private map: any;
  ngOnInit() {
    setTimeout(() => {
      this.isShowChart = true;
      // this.initData(false);
      if (this.tagData.isNeedRequestData === undefined) {
        setTimeout(() => {
          // 更新定位信息
          this.initData(true);
        }, 1250);
      }
    }, 1500);
  }
  initMap(pt) {
    const that = this;
    const map = (this.map = new BMap.Map(this.mapElement.nativeElement, {
      minZoom: 18,
      maxZoom: 18,
      enableMapClick: false,
    }));
    map.setMapStyle({ style: 'googlelite' });
    const pointCode = pt;
    map.disableKeyboard();
    map.disableDoubleClickZoom();
    map.disableScrollWheelZoom();
    map.disableContinuousZoom();
    map.disableDragging();
    map.disableKeyboard();
    map.disablePinchToZoom();
    map.disableContinuousZoom();
    map.clearOverlays();
    const point = new BMap.Point(pointCode.lng, pointCode.lat);
    const gpsMarker = new BMap.Marker(point, { icon: this.gps });
    map.centerAndZoom(point, 18);
    gpsMarker.disableMassClear();
    map.addOverlay(gpsMarker);
    map.addEventListener("tilesloaded", () => {
      const objs = document.getElementsByClassName(" anchorBL");
      if (objs !== undefined && objs.length > 0) {
        for (let i = 0, len = objs.length; i < len; i++) {
          if (objs[i] !== undefined) {
            objs[i].setAttribute("style", "display:none;");
          }
        }
      }
      that.mapMaskElement.nativeElement.style.display = "none";
    });
  }
  gotoMap() {
    if (this.tagData.link.type === "url") {
      this.appGlobalService.openUrl(
        this.tagData.link.label,
        this.tagData.link.link.iconUrl
      );
    } else if (
      this.tagData.link.type === "page" ||
      this.tagData.link.type === "view"
    ) {
      const pageParams = {
        pageId: this.tagData.link.target,
        params: { code: this.storageObj.code },
        sessionId: localStorage.getItem("sessionId"),
      };
      const pStore = JSON.parse(localStorage.getItem("position"));
      localStorage.removeItem("mapPosition");
      localStorage.setItem("mapPosition", JSON.stringify(pStore));
      /* console.log(JSON.stringify(pageParams)) */
      this.appGlobalService.goToForward(pageParams);
    }
  }
  initData(needRequest) {
    try {
      this.storageObj = JSON.parse(localStorage.getItem("position"));
      this.initMap({
        lng: this.storageObj.center.lng,
        lat: this.storageObj.center.lat,
      });
      this.mapBaiduService.getSurroundingPoisByPoint(
        (result) => {
          const params = {
            content: {
              code: this.storageObj.code,
              dataType: 1,
              location: result.location,
              mapGroupBy: "opportunity_district_id",
            },
            id: this.tagData.asynLoad.submit.id,
            sessionId: localStorage.getItem("sessionId"),
          };
          if (needRequest === true) {
            this.http.post("application/submit", params, (res) => {
              try {
                if (res.data) {
                  this.tagData.data = res.data.data;
                }
              } catch (error) { }
            });
          } else {
            if (this.tagData.isNeedRequestData === undefined) {
              this.tagData.data = this.getStaticData();
            }
          }
        },
        this.storageObj.center.lng,
        this.storageObj.center.lat
      );
    } catch (error) {
      console.log("error----->" + JSON.stringify(error));
    }
  }
  getStaticData() {
    return [
      {
        id: null,
        label: "餐饮美食",
        total: 297823,
        code: 11,
        ratio: "50.8%",
      },
      {
        id: null,
        label: "美容美发",
        total: 66111,
        code: 12,
        ratio: "11.3%",
      },
      {
        id: null,
        label: "百货超市",
        total: 65719,
        code: 15,
        ratio: "11.2%",
      },
    ];
  }
}
